import React, { PureComponent } from "react";
import { Link } from "react-router-dom";
import { Layout, Menu } from "antd";
import Icon from "@cbd/icon";
import { connect } from "dva";
import { goToUrl } from "utils/comm";
import logo from "../../assets/images/logo.png";
import logoText from "../../assets/images/title.png";
import styles from "./BaseMenu.less";
import config from "../../config";

// sider 有一个双次render的bug，是框架自身问题，如果有强制要求，可以考虑替换
const { Sider } = Layout;
const { SubMenu } = Menu;

const externalLink = ["swagger","document","notices"];

/**
 * 递归渲染菜单
 * @param data
 * @returns {*}
 */
const renderMenu = (data, collapsed, onMenuItemClick, resourceList = []) => {
  return data.map(
    ({ key, children, icon, title = "", link = "", hiddenMenu, menuId }) => {
      if (hiddenMenu) return;
      if (
        resourceList &&
        resourceList.some &&
        !resourceList.some((ele) => menuId === ele)
      )
        return;
      if (children) {
        const showtitle = children.filter((item) => !item.banbasemenu);
        if (showtitle.length > 0) {
          return (
            <SubMenu
              key={key}
              title={
                <span>
                  {icon ? <Icon className="anticon" type={icon} /> : undefined}
                  <span>{title}</span>
                </span>
              }
            >
              {renderMenu(showtitle, collapsed, onMenuItemClick, resourceList)}
            </SubMenu>
          );
        } else {
          return (
            <Menu.Item
              key={key}
              onClick={(e) => {
                onMenuItemClick(e, link);
              }}
            >
              {icon ? <Icon className="anticon" type={icon} /> : undefined}
              <span>{title}</span>
            </Menu.Item>
          );
        }
      } else {
        return (
          <Menu.Item
            key={key}
            onClick={(e) => {
              onMenuItemClick(e, link);
            }}
          >
            {icon ? <Icon className="anticon" type={icon} /> : undefined}
            <span>{title}</span>
          </Menu.Item>
        );
      }
    },
  );
};

@connect(({ Public }) => ({
  openKeys: Public.openMenuKeys,
  selectedKeys: Public.selectedMenuKeys,
}))
class BaseMenu extends PureComponent {
  onOpenChange = (openKeys) => {
    const { dispatch } = this.props;
    /*
    this.setState({
      openKeys: [openKeys[openKeys.length - 1]],
    });
    */
    dispatch({
      type: "Public/set/openMenuKeys",
      payload: [openKeys[openKeys.length - 1]],
    });
  };

  onMenuClick = (key) => {
    const { dispatch } = this.props;
    if (externalLink.includes(key)) {
      if (key === "swagger") {
        window.open(config.swaggerLink, "_blank");
      }else  if (key === "document") {
        window.open(config.documentLink, "_blank");
      }else {
        window.open(config.noticesLink, "_blank");
      }
    } else {
      dispatch({
        type: "Public/set/selectedMenuKeys",
        payload: [key],
      });
    }
  };

  render() {
    const {
      collapsed,
      data,
      onMenuItemClick,
      className = "",
      resourceList,
      selectedKeys,
      openKeys,
    } = this.props;
    return (
      <Sider collapsed={collapsed} className={className}>
        <div className={styles.root}>
          <div className={styles.logo}>
            <Link to="/home" onClick={() => goToUrl("home")}>
              <div
                className={`${styles.img}`}
                style={{ justifyContent: collapsed ? "center" : "unset" }}
              >
                <span className={styles.menuImg}>
                  <img src={logo} alt="" />
                </span>
                <span
                  className={styles.menuTitle}
                  style={{ display: collapsed ? "none" : "block" }}
                >
                  <img src={logoText} alt="" />
                </span>
              </div>
            </Link>
          </div>
          <Menu
            defaultSelectedKeys={["1"]}
            mode="inline"
            theme="dark"
            className={styles.menu_left}
            onClick={({ key }) => {
              this.onMenuClick(key);
            }}
            openKeys={openKeys}
            onOpenChange={this.onOpenChange}
            selectedKeys={selectedKeys}
          >
            {renderMenu(data, !collapsed, onMenuItemClick, resourceList)}
          </Menu>
        </div>
      </Sider>
    );
  }
}

// const BaseMenu = ({ collapsed, data, onMenuItemClick, className = '' }) => (

// );

export default BaseMenu;
